<template>
    <div class="order-activity">
        <div class="head-box">
            <div class="icon" @click="backFun">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="head-title">我的活动 / 订单管理</div>
        </div>
        <div class="tab-box">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部订单" name="1">
                    <orderTable
                        ref="orderTable"
                        :options="options"
                        :searchFrom="searchFrom1"
                        :tableData="tableData1"
                        :activeName="activeName"
                        :col_all="col_all1"
                        :col_ls="col_ls1"
                        :status_send_ls="status_send_ls"
                        @handleWrite="handleWrite"
                        @handleEdit="handleEdit"
                        @loadFun="loadFun"
                        @resetFun="searchFun"
                        @setstatusFun="setstatusFun"
                        @refreshFun="refreshFun"
                        @setcolFun="setcolFun"
                    ></orderTable>
                </el-tab-pane>
                <el-tab-pane label="用户列表" name="2">
                    <userTable
                        ref="userTable2"
                        :options="options"
                        :searchFrom="searchFrom2"
                        :tableData="tableData2"
                        :activeName="activeName"
                        :col_all="col_all2"
                        :col_ls="col_ls2"
                        @refreshFun="refreshFun"
                        @loadFun="loadFun"
                        @searchFun="searchFun"
                        @setcolFun="setcolFun"
                        @handleBlacklist="handleBlacklist"
                    ></userTable>
                </el-tab-pane>
                <el-tab-pane label="活动黑名单" name="3">
                    <userTable
                        ref="userTable3"
                        :options="options"
                        :searchFrom="searchFrom3"
                        :tableData="tableData3"
                        :activeName="activeName"
                        :col_all="col_all3"
                        :col_ls="col_ls3"
                        @refreshFun="refreshFun"
                        @loadFun="loadFun"
                        @searchFun="searchFun"
                        @setcolFun="setcolFun"
                        @handleBlacklist="handleBlacklist"
                    ></userTable>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 核销弹框 -->
        <writeoffDialog
            ref="writeoffDialog"
            @immediatelyFun="immediatelyFun"
        ></writeoffDialog>
        <!-- 修改联系信息弹框 -->
        <el-dialog
            title="修改联系信息"
            :visible.sync="dialogContact"
            :close-on-click-modal="false"
            width="40%"
        >
            <div class="from-box">
                <el-form
                    ref="contactFrom"
                    :model="contactFrom"
                    label-width="70px"
                >
                    <el-form-item label="姓名">
                        <el-input
                            v-model="contactFrom.addressee"
                            class="input-w"
                            placeholder="请输入姓名"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input
                            v-model="contactFrom.cellphone"
                            class="input-w"
                            placeholder="请输入联系电话"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="联系地址">
                        <el-cascader
                            v-model="contactFrom.district"
                            class="input-w"
                            :options="optionsData"
                            :props="propsdata"
                            placeholder="请选择地址"
                            @change="handleChange"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="详情地址">
                        <el-input
                            v-model="contactFrom.address"
                            placeholder="请输入详细地址"
                            class="input-w"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogContact = false">取 消</el-button>
                <el-button type="primary" @click="contactInfoFun"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import userTable from "@/components/interactive/userTable.vue";
import orderTable from "@/components/interactive/orderTable.vue";
import writeoffDialog from "@/components/interactive/writeoffDialog.vue";
import config from "@/js/conf/Config.js";

export default {
    props: [],
    components: { userTable, orderTable, writeoffDialog },
    computed: {},

    data() {
        return {
            activeName: "1",
            dialogContact: false,
            contactFrom: {
                addressee: "",
                cellphone: "",
                district: [],
                address: "",
            },
            status_send_ls: [],
            optionsData: [],
            options: [
                {
                    id: "no",
                    title: "订单号",
                },
                {
                    id: "uname",
                    title: "用户号",
                },
                {
                    id: "phone",
                    title: "手机号",
                },
            ],
            propsdata: {
                children: "cityList",
                label: "name",
                value: "code",
                expandTrigger: "hover",
                checkStrictly: true,
            },
            is_soll1: true,
            is_soll2: true,
            is_soll3: true,
            searchFrom1: {
                ch: "order",
                hdongid: "",
                kw_ch: "no",
                kw: "",
                chno: "",
                uid_ck: "",
                time: "",
                stime: "",
                dtime: "",
                pfrom: 0,
                pnum: 20,
            },
            searchFrom2: {
                pfrom: 0,
                pnum: 20,
                kw_ch: "no",
                kw: "",
                hudongid: "",
                is_bk: "2",
            },
            searchFrom3: {
                pfrom: 0,
                pnum: 20,
                kw_ch: "no",
                kw: "",
                hudongid: "",
                is_bk: "1",
            },
            tableData1: [],
            tableData2: [],
            tableData3: [],
            col_all1: [],
            col_all2: [],
            col_all3: [],
            col_ls1: [],
            col_ls2: [],
            col_ls3: [],
        };
    },
    created() {
        this.searchFrom1.hdongid = this.$geturl().hdongid || "";
        this.searchFrom2.hudongid = this.$geturl().hdongid || "";
        this.searchFrom3.hudongid = this.$geturl().hdongid || "";
        this.activeName = this.$geturl().tab || "1";
        this.initData();
    },
    mounted() {},
    methods: {
        initData() {
            this.getListFun();
            this.getdistrictsData();
        },
        handleClick() {
            const val = this.activeName;
            if (val == 1) {
            } else {
                if (this[`tableData${val}`].length == 0) {
                    this.getListFun();
                } else {
                    this.setTablehetFun();
                }
            }
        },
        handleBlacklist(item, val) {
            // if (val == 2) {
            //     let arr = null;
            //     if (this.tableData3.length > 0) {
            //         this.tableData2.map((v, i) => {
            //             if (v.id == item.id) {
            //                 arr = this.tableData2.splice(i, 1);

            //                 this.tableData3.unshift(arr[0]);
            //             }
            //         });
            //     }
            // } else {
            //     let arr = null;
            //     if (this.tableData2.length > 0) {
            //         this.tableData3.map((v, i) => {
            //             if (v.id == item.id) {
            //                 arr = this.tableData3.splice(i, 1);
            //                 this.tableData2.unshift(arr[0]);
            //             }
            //         });
            //     }
            // }
            this.resetFun();
            this.getListFun();
        },
        searchFun() {
            this.resetFun();
            this.getListFun();
        },
        refreshFun() {
            const val = this.activeName;
            this[`searchFrom${val}`].kw_ch = "no";
            this[`searchFrom${val}`].kw = "";
            this.resetFun();
            this.getListFun();
        },
        loadFun() {
            const val = this.activeName;
            if (this[`is_soll${val}`]) return;
            this[`searchFrom${val}`].pfrom += 20;
            this.getListFun();
        },
        async getdistrictsData() {
            let param = {};
            let url = config.COMM_DISTRICTS;
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1 && res.data) {
                this.optionsData = res.data;
            }
        },
        async getListFun() {
            const val = this.activeName;
            this[`is_soll${val}`] = true;
            let url =
                val == 1 ? config.HD_ORDER_ORDER_LS : config.HD_TOOL_USER_LS;
            let param = this[`searchFrom${val}`];
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1 && (res.data.user_ls || res.data.ls)) {
                this[`tableData${val}`] = this[`tableData${val}`].concat(
                    res.data.user_ls || res.data.ls
                );
                setTimeout(() => {
                    this[`is_soll${val}`] = false;
                }, 200);
            } else {
                this[`is_soll${val}`] = true;
            }
            if (this[`tableData${val}`].length > 0) {
                this.setTablehetFun();
            }
            if (res.status == 1 && res.data.col_all) {
                this[`col_all${val}`] = res.data.col_all;
            }
            if (res.status == 1 && res.data.col_ls) {
                if (val == 1) {
                    this.$refs.orderTable.checkListcol = [];
                } else {
                    this.$refs[`userTable${val}`].checkListcol = [];
                }
                this[`col_ls${val}`] = res.data.col_ls;
                this[`col_ls${val}`].map((v) => {
                    if (val == 1) {
                        this.$refs.orderTable.checkListcol.push(v.col);
                    } else {
                        this.$refs[`userTable${val}`].checkListcol.push(v.col);
                    }
                });
            }
            if (res.status == 1 && res.data.status_send_ls) {
                this.status_send_ls = res.data.status_send_ls;
            }
        },

        contactInfoFun() {
            const data = {
                act: "addr_edt",
                odid: this.contactFrom.id,
                shipp_info: {
                    addressee: this.contactFrom.addressee,
                    cellphone: this.contactFrom.cellphone,
                    province: this.contactFrom.district[0],
                    city: this.contactFrom.district[1],
                    area: this.contactFrom.district[2],
                    district: this.getmapNameFun(this.contactFrom.district),
                    address: this.contactFrom.address,
                },
            };
            this.setactFun(data);
        },
        setstatusFun(data) {
            this.setactFun(data);
        },
        immediatelyFun(data) {
            this.setactFun(data);
        },
        // 单据操作
        async setactFun(data = {}) {
            let url = config.HD_ORDER_ORDER_ACT;
            let param = {
                odid: data.odid || "",
                odid_ls: data.odid_ls || [],
                act: data.act,
                status_send: data.status_send || "",
                status_ck: data.status_ck || "",
                txt_ck: data.txt_ck || "",
                img_ck: "",
                sign_ck: "",
                shipp_info: data.shipp_info || "",
            };
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1) {
                this.$msg({ title: res.msg });
                this.dialogContact = false;
                setTimeout(() => {
                    this.resetFun();
                    this.getListFun();
                }, 2000);
            }
        },
        async setcolFun(data = {}) {
            let url = config.HD_COMMON_SET_COL;
            let param = data;
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1) {
                this.$msg({ title: res.msg });
                setTimeout(() => {
                    this.resetFun();
                    this.getListFun();
                }, 2000);
            }
        },
        // 打开核销弹框
        handleWrite(data) {
            this.$refs.writeoffDialog.initData(data);
        },
        // 打开修改联系信息弹框
        handleEdit(item) {
            if (item.address_info) {
                this.contactFrom = {
                    id: item.id,
                    addressee: item.address_info.addressee,
                    cellphone: item.address_info.cellphone,
                    district: [
                        item.address_info.province,
                        item.address_info.city,
                        item.address_info.area,
                    ],
                    address: item.address_info.address,
                };
            } else {
                this.contactFrom = {
                    addressee: "",
                    cellphone: "",
                    district: [],
                    address: "",
                };
            }

            this.dialogContact = true;
        },

        //计算表格操作栏的高度
        setTablehetFun() {
            const val = this.activeName;
            let height = 0;
            this.$nextTick(() => {
                const query = uni
                    .createSelectorQuery()
                    .selectAll(".el-table__body");
                query
                    .fields(
                        {
                            rect: false,
                            size: true,
                            scrollOffset: false,
                        },
                        function (res) {
                            res.map((v) => {
                                if (v.height) {
                                    height = v.height + 50;
                                }
                            });
                        }
                    )
                    .exec(function () {});
            });
            setTimeout(() => {
                for (let i = 0; i < 3; i++) {
                    console.log(i);
                    let dom = document.querySelectorAll(
                        ".el-table__fixed-right"
                    )[Number(i)];
                    if (dom) {
                        dom.setAttribute(
                            "style",
                            `width:150px;height: ${height}px `
                        );
                    }
                }
            }, 200);
        },
        resetFun() {
            const val = this.activeName;
            this[`searchFrom${val}`].pfrom = 0;
            this[`tableData${val}`] = [];
        },
        backFun() {
            uni.navigateTo({
                url: `/pages/interactiveOrder/my-activities`,
            });
        }, // 获取地址名称
        getmapNameFun(arr) {
            let name = "";
            const province = arr[0] | "";
            const city = arr[1] | "";
            const area = arr[2] | "";
            if (province) {
                this.optionsData.map((v) => {
                    if (province == v.code) {
                        name += v.name;
                        if (city) {
                            v.cityList.map((vs) => {
                                if (city == vs.code) {
                                    name += vs.name;
                                    if (area) {
                                        vs.cityList.map((vw) => {
                                            if (area == vw.code) {
                                                name += vw.name;
                                            }
                                        });
                                    }
                                }
                            });
                        }
                    }
                });
            }
            return name;
        },
    },
};
</script>

<style lang="scss" scoped >
.order-activity {
    background: #f2f2f2;
    height: 100%;

    .head-box {
        background: #fff;
        padding: 10px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ececec;
        .icon {
            font-size: 26px;
            cursor: pointer;
            margin-right: 5px;
        }
        .head-title {
            font-size: 18px;
        }
        .head-title {
            font-size: 18px;
        }
    }
    ::v-deep.tab-box {
        height: calc(100% - 52px);
        .el-tabs__nav-scroll {
            padding: 0 10px;
            font-size: 14px;
        }
        .el-tabs__nav {
            .el-tabs__item {
                font-size: 16px;
            }
        }
    }
    .from-box {
        .input-w {
            width: 250px;
        }
    }
}
</style>
